<template>
	<div class="tollcontent" style="margin-left: 5%;width: 90%;margin-right: 5%;">
		<!--<el-row style="text-align: center;">
			<el-col :span="6" style="margin-top: 20px;float: left;">
				<el-select v-model="value" placeholder="请选择" @change="selecttunnle(value)">
					<el-option v-for="item in options" :key="item.value"  :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="6" style="margin-top: 20px;float: left;">
				<el-select v-model="value" placeholder="请选择" @change="selecttunnle(value)">
					<el-option v-for="item in options" :key="item.value"  :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="12">
				<p @click="addhighroad()" style="width: 100px;height: 40px;background: #1293EE;color: #FFFFFF;text-align: center;line-height: 40px;cursor: pointer;float: right;">添加管理处</p>
			</el-col>
		</el-row>-->

		<el-form :model="form" class="selectList" label-width="120px">
			<el-row>
				<el-col :span="6" style="margin-top: 17px;">
					<el-form-item label="请选择高速">
						<el-select v-model="form.sectionCode" value-key="code" placeholder="请选择隧道" @change="tunnelSelect(form.sectionCode)">
							<el-option label="请选择高速" value=""></el-option>
							<el-option v-for="tunnelList in tunnelLists" :label="tunnelList.name" :value="tunnelList.code" :key="tunnelList.code"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" style="margin-top: 17px;">
					<el-form-item label="请选择管理处">
						<el-select v-model="form.categoryCode" placeholder="请选择设备分类" @change="equipmentClassSelect(form.categoryCode)">
							<el-option label="请选择管理处" value=""></el-option>
							<el-option v-for="equipmentClass in equipmentClassLists" :label="equipmentClass.name" :value="equipmentClass.code" :key="equipmentClass.code"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" style="margin-top: 17px;">
					<p @click="addhighroad()" style="width: 100px;height: 40px;background: #1293EE;color: #FFFFFF;text-align: center;line-height: 40px;cursor: pointer;float: right;">添加收费站</p>
				</el-col>
			</el-row>

		</el-form>

		
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="日期" width="180">
			</el-table-column>
			<el-table-column prop="name" label="收费站名称" width="180">
			</el-table-column>
			<el-table-column prop="location" label="经纬度">
			</el-table-column>
			<el-table-column prop="" label="操作">
				<template slot-scope="scope">
					<a class="reset" style="cursor: pointer;color: #1293EE;" @click="updateFunc(scope.$index, scope.row)">修改</a>
					<i class="line"></i>
					<a class="delete" style="cursor: pointer;color: #1293EE;" @click.stop="deleteFunc(scope.$index, scope.row)">删除</a>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
		<div class="elboard">
			<el-dialog title="添加收费站" :visible.sync="centerDialogVisible" width="32%" center>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
					<el-row style="text-align: center;">
						<el-col :span="18">
							<el-form-item label="收费站名称" prop="name">
								<el-input v-model="ruleForm.name" placeholder="请输入收费站名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="18">
							<el-form-item label="中心点经纬度" prop="address">
								<el-input v-model="ruleForm.address" placeholder="请输入经纬度"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="24" class="dialog-footer" style="text-align: center;">
							<el-button @click="cancel('ruleForm')">取消</el-button>
							<el-button type="primary" @click="addSave('ruleForm')">确定</el-button>

						</el-col>
					</el-row>

				</el-form>

			</el-dialog>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				centerDialogVisible: false,
				tableData: [{
					date: '2016-05-02',
					name: '成都站',
					location: '104.210408,30.654815'
				},
				{
					date: '2016-05-02',
					name: '龙泉驿收费站',
					location: '104.28505,30.639554'
				},
				{
					date: '2016-05-02',
					name: '洛带收费站',
					location: '104.327334,30.628926'
				},
				{
					date: '2016-05-02',
					name: '羊马收费站',
					location: '104.485624,30.539958'
				},
				{
					date: '2016-05-02',
					name: '简阳收费站',
					location: '104.463516,30.561956'
				},
				{
					date: '2016-05-02',
					name: '禾丰收费站',
					location: '104.463516,30.561956'
				},
				{
					date: '2016-05-02',
					name: '高寿收费站',
					location: '104.463516,30.561956'
				},
				{
					date: '2016-05-02',
					name: '乐至收费站',
					location: '104.463516,30.561956'
				},
				{
					date: '2016-05-02',
					name: '石湍收费站',
					location: '104.463516,30.561956'
				},
				{
					date: '2016-05-02',
					name: '安岳收费站',
					location: '104.463516,30.561956'
				},
				{
					date: '2016-05-02',
					name: '兴隆收费站',
					location: '104.463516,30.561956'
				},
				{
					date: '2016-05-02',
					name: '李家收费站',
					location: '104.463516,30.561956'
				},
				{
					date: '2016-05-02',
					name: '四川收费站',
					location: '104.463516,30.561956'
				},
				
				],
				pageNo: 1,
                pageSize: 10,
                total: 0,
				ruleForm: {
					name: '',
					address: '',
					laneNumber: ''
				},
				form: {
					sectionCode: '',
					categoryCode: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入隧道名称',
						trigger: 'blur'
					}, ],
					address: [{
						required: true,
						message: '请输入中心点经度',
						trigger: 'blur'
					}, ],

				},
				tunnelLists: [{
					name: '渝荣高速',
					code: 1
				}, {
					name: '云南高速',
					code: 2
				}],
				equipmentClassLists: [{
					name: '渝荣高速',
					code: 1
				}, {
					name: '云南高速',
					code: 2
				}],
				options: [{
					value: '选项1',
					label: '渝荣高速'
				}, {
					value: '选项2',
					label: '云南高速'
				}],
				value: ''
			}
		},
		mounted() {

		},
		methods: {
			handleSizeChange(val) {
                this.pageSize = val
                this.smartPlanList()
            },
            handleCurrentChange(val) {
                this.pageNo = val
                this.smartPlanList()
            },
			tunnelSelect(){
				
			},
			equipmentClassSelect(){
				
			},
			updateFunc(index, row) {
				//				console.log(index,row);
				this.centerDialogVisible = true;
				this.ruleForm.name = row.name;
				this.ruleForm.address = row.location;
			},
			addSave() {
				this.centerDialogVisible = false;
			},
			deleteFunc(index, row) {
				this.$confirm('此操作将删除该智能预案, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
			},
			addhighroad() {
				this.ruleForm.name = " ";
				this.ruleForm.address = " ";

				this.centerDialogVisible = true;
			},
			cancel() {
				this.centerDialogVisible = false;
			},
			selecttunnle(value) {
				console.log(value);
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>